<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <ol class="breadcrumb">
        <li><a href="Admin.html">学生成绩管理系统</a></li>
        <li><a href="Admin.html">个人主页</a></li>
        <li>修改个人信息</li>
    </ol>
    <h3 class="page-header">修改个人信息</h3>
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2">教师编号</label>
            <div class="col-sm-8">
                <span>{{teacher.tno}}</span>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2">教师姓名</label>
            <div class="col-sm-8">
                <input type="text" placeholder="请输入姓名" class="form-control" v-model="teacher.tname">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2">教师年龄</label>
            <div class="col-sm-8">
                <input type="text" placeholder="请输入年龄" class="form-control" v-model="teacher.age">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-8 col-sm-offset-2">
                <input type="button" value="修改" class="btn btn-success" @click="updateTeacher()">
                <input type="reset" value="重置" class="btn btn-danger">
            </div>
        </div>
    </form>
</div>
<script src="js/vue/vue2.5.js"></script>
<script src="js/vue/axios.min.js"></script>
<script src="js/jquery.js"></script>
<script src="js/layer/layer.js"></script>
<script src="js/param.js"></script>
<script>
    new Vue({
        el:'.container',
        data:{
            teacher:{
                tno:'',
                tname:'',
                age:''
            }
        },
        methods:{
            //修改
            updateTeacher(){
                //验证表单逻辑
                if(!this.checkForm()) return;

                //向服务器发出ajax请求 增加部门
                axios.get('/teacher/update',{params:this.teacher})
                    .then(resp =>{
                        layer.msg('个人信息修改成功！');
                        setTimeout(()=>{
                            location.href='Admin.html';
                        },500);
                    })
            },
            //表单验证
            checkForm() {
                //验证成绩
                let r = /^([0-9]|[1-9][0-9]|100)$/;
                if(!r.test(this.teacher.age)) {
                    layer.alert('年龄必须为0~100！');
                    return false;
                }
                return true;
            },

            getTeacher(){
                axios.get('/teacher/query',{params:{tno:this.teacher.tno}})
                    .then(resp=>{
                        this.teacher = resp.data;
                    })
            }
        },
        mounted(){
            this.teacher.tno = getParam('tno');
            this.getTeacher();
        }

    });
</script>
</body>
</html>